<template>
    <view class="bg-[#EAEAEA] min-h-screen">
        <view class=" font-medium py-[20rpx] text-center">机构名称：青秀区老干部中心</view>
        <view class=" font-medium py-[20rpx] text-center flex items-center justify-center"><text
                class="mr-4">范围：xxxx班级</text><u-icon name="arrow-down" color="#3F3F3F" size="18"></u-icon></view>
        <view class="bg-white  pt-[20rpx] pb-[20rpx] ">
            <view class="text-[30rpx] pt-[20rpx] flex justify-around">
                <view @click="tabs = 0"
                    :class="tabs == 0 ? 'font-bold text-[#FD755D] border-b-[5rpx] border-[#FD755D]' : 'text-[#434141]'"
                    class=" ">统计</view>
                <view @click="tabs = 1"
                    :class="tabs == 1 ? 'font-bold text-[#FD755D] border-b-[5rpx] border-[#FD755D]' : 'text-[#434141]'">查询
                </view>
            </view>
     

                <view class="flex mt-[20rpx] items-center justify-between">
                    <view class="ml-[40rpx] font-bold">查询条件</view>
                    <view class="bg-[#fee4df] text-[#FD755D] rounded-l-[167rpx] px-[10rpx] py-1">+添加属性</view>
                </view>
                <view class="pb-[20rpx] text-[34rpx] px-[40rpx]">

                    <view class="mt-[30rpx] flex items-center"><text>性别：</text>
                        <view class="flex w-[60vw] justify-between border-b border-[#D8D8D8] py-1"><text
                                class="ml-[30rpx]">男</text><u-icon name="arrow-down" color="#3F3F3F" size="18"></u-icon>
                        </view>
                    </view>
                    <view class="mt-[30rpx] flex items-center"><text>出生年月：</text>
                        <view class="flex w-[60vw] justify-between border-b border-[#D8D8D8] py-1"><text
                                class="ml-[30rpx]">1990.10.1~2005.10.1</text><u-icon name="arrow-down" color="#3F3F3F"
                                size="18"></u-icon>
                        </view>
                    </view>
                    <view class="mt-[30rpx] flex items-center"><text>政治面貌：</text>
                        <view class="flex w-[60vw] justify-between border-b border-[#D8D8D8] py-1"><text
                                class="ml-[30rpx]">党员</text><u-icon name="arrow-down" color="#3F3F3F"
                                size="18"></u-icon>
                        </view>
                    </view>
                    <view class="mt-[30rpx] flex items-center"><text>类别：</text>
                        <view class="flex w-[60vw] justify-between border-b border-[#D8D8D8] py-1"><text
                                class="ml-[30rpx]">退休</text><u-icon name="arrow-down" color="#3F3F3F"
                                size="18"></u-icon>
                        </view>
                    </view>


                </view>
       


        </view>
        <view @click="navigateTo('/pages/onePersonOneLeg/result')" class="mx-[30rpx] mt-[205rpx] text-center bg-[#fd755d] text-white py-[10rpx] rounded-lg">{{tabs==0?'统计':'查询'}}</view>
    </view>
</template>
<script setup>
import { ref } from "vue"
const tabs = ref(0)
const navigateTo = (url) => {
    uni.navigateTo({
        url
    })
}
</script>